<template>
    <el-card shadow="never">
        <template #header>
            <div class="flex justify-between">
                <span class="text-sm">订单统计</span>
                <div>
                    <el-check-tag v-for="(item,index) in options" 
                        :key="index" 
                        :checked="current == item.value"
                        style="margin-right: 8px;"
                        @click="handleChoose(item.value)"
                    >
                        {{ item.text }}
                    </el-check-tag>
                </div>
            </div>
        </template>
        <div ref="el" id="chart" style="width: 100%; height: 300px;"></div>
    </el-card>
    
</template>

<script setup>
import { ref,onMounted,onBeforeUnmount,useTemplateRef } from 'vue'
import { useResizeObserver } from '@vueuse/core'
import { getStatistics3 } from '~/api/index'
import * as echarts from 'echarts'

// 当前选中得状态
const current = ref('week')

const options = [
    {
        text: '近1个月',
        value: 'month'
    },
    {
        text: '近1周',
        value: 'week'
    },
    {
        text: '近24小时',
        value: 'hour'
    }
]

// 切换标签
const handleChoose = (type) => {
    // 改选中的值和重新绘图
    current.value = type
    getData()
}

// 先初始化myChart的值为null
var myChart = null

// 不在setup里用，在渲染的时候去用,setup里是拿不到id值的
onMounted(() => {
    var chartDom = document.getElementById('chart');
    // 看看是否可以找到这个Dom，可能是自己定义错了id或者是没有这个访问权限,后者的概率可能更大
    if(chartDom){
        myChart = echarts.init(chartDom);
        // 调用获取数据的方法
        getData()
    }
})

// 组件销毁时销毁echart实例对象,防止后续白屏,建议每次都对这个对象进行销毁
onBeforeUnmount(() => {
    // 如果存在echart实例对象，则销毁
    if(myChart){
        myChart.dispose(myChart)
    }
})

// 获取数据
function getData(){
    let option = {
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
        data: [],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
        }
        }
    ]
    };
    // 添加loading加载动画
    myChart.showLoading()
    getStatistics3(current.value).then(res => {
        // 请求接口并对option中进行赋值
        option.xAxis.data = res.data.x
        option.series[0].data = res.data.y
        myChart.setOption(option)
    }).finally(() => {
        // 最后隐藏loading加载动画
        myChart.hideLoading()
    })
}

// 这是配合了vueuse的useResizeObserver方法和echart的resize方法，实现图表的实时适配
const el = useTemplateRef('el')
useResizeObserver(el, (entries) => {
    // 也要判断一下到底有没有实例化这个echart实例对象,可能是id写错了或者没有权限,不过是后者的概率比较大
    if(myChart){
        myChart.resize()
    }
})
</script>
